<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY css SYSTEM "../phaidros.css">
]>
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" encoding="utf-8" indent="yes" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" 
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:include href="topbuttons.xsl"/>
<xsl:include href="popup.xsl"/>
<xsl:include href="search.xsl"/>
<xsl:include href="digitalvariants.xsl"/>
<xsl:include href="formats.xsl"/>

<!-- main template for HTML page -->
<xsl:template match="/">
<xsl:variable name="version1Id" select="//response/content[@side='left']/@version"/>
<xsl:variable name="version2Id" select="//response/content[@side='right']/@version"/>
<xsl:variable name="file" select="//response/@file"/>
<xsl:variable name="pattern1" select="//response/@pattern1"/>
<xsl:variable name="pattern2" select="//response/@pattern2"/>
<xsl:variable name="long1Name" select="//version[number($version1Id)]/@longName"/>
<xsl:variable name="long2Name" select="//version[number($version2Id)]/@longName"/>
<html>
<head>
<title><xsl:value-of select="//teiHeader/fileDesc/titleStmt/title"/></title>
<style type="text/css">
&css;
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function popup()
{
	setVersion();
    document.submission.submit();
}
function setVersion()
{
	var menu1 = document.getElementById("version1Popup");
 	var menu2 = document.getElementById("version2Popup");
    var version1 = document.getElementById("Version1");
    var version2 = document.getElementById("Version2");
    var parts1 = menu1.options[menu1.selectedIndex].id.split(".");
    var parts2 = menu2.options[menu2.selectedIndex].id.split(".");
    version1.value = parts1[1];
    version2.value = parts2[1];
}
function redirect( action )
{
	setVersion();
	document.submission.action=action;
	document.submission.submit();
}
function notImplemented()
{
	alert("Sorry, this feature is not yet implemented");
}
function search( command )
{
	var pattern1Field = document.getElementById( "Pattern1" );
	var pattern2Field = document.getElementById( "Pattern2" );
	var searchBox1 = document.getElementById("Search1");
	var searchBox2 = document.getElementById("Search2");
	var commandField = document.getElementById("Command");
	pattern1Field.value = searchBox1.value;
	pattern2Field.value = searchBox2.value;
	commandField.value = command;
	setVersion();
	document.submission.submit();
}
function scrollToSelection()
{
	var divLeft = document.getElementById('displayBox1');
	var divRight = document.getElementById('displayBox2');
	var selSpan1 = document.getElementById('selection1');
	var selSpan2 = document.getElementById('selection2');
	if ( selSpan1 != null )
	{
		divLeft.scrollTop = selSpan1.offsetTop-(divLeft.clientHeight/2);
	}
	else if ( selSpan2 != null )
	{
		divRight.scrollTop = selSpan2.offsetTop-(divRight.clientHeight/2);
	}
	// dynamically resize displayBox divs to the size of the left one
	var twinDiv = document.getElementById("twinCentreColumn");
	var divInfo = document.getElementById("twinInfoBox1");
	var divSearch = document.getElementById("searchBox1");
	var divHeader = document.getElementById("header");
	var height = window.innerHeight - (divInfo.offsetHeight
		+divSearch.offsetHeight+divHeader.offsetHeight);
	divLeft.style.height=height+"px";
	divRight.style.height=height+"px";
	height = window.innerHeight - divHeader.offsetHeight;
	twinDiv.style.height=height+"px";
}
function performlink(srcName,dstName)
{
    var srcDiv,dstDiv;
    var srcObj,dstObj;
    if ( dstName.indexOf("left",0)==0 )
    {
    	srcDiv = document.getElementById("displayBox2");
    	dstDiv = document.getElementById("displayBox1");
    }
    else
    {
    	srcDiv = document.getElementById("displayBox1");
    	dstDiv = document.getElementById("displayBox2");
    }
    dstObj = document.getElementById(dstName);
    srcObj = document.getElementById(srcName);
    var srcSpanPos = getElemTop( srcObj );
    var srcDivTop = getElemTop( srcDiv );
    var srcScrollPos = srcSpanPos - srcDivTop;
    var amountToScrollDown = srcScrollPos - srcDiv.scrollTop;
    // amountToScrollDown is the distance between the top
    // of the visible div and the top of the anchor clicked on
    var dstSpanPos = getElemTop( dstObj );
    var dstDivTop = getElemTop( dstDiv );
    var dstScrollPos = dstSpanPos - dstDivTop;
    var dstScrollAmount = dstScrollPos - amountToScrollDown;
    // other scrollAmount is the amount to scroll down the other div
    // may be less than 0, so adjust - NB can't use angle brackets
    if ( Math.abs(dstScrollAmount)!= dstScrollAmount )
    	dstScrollAmount = 0;
    dstDiv.scrollTop = dstScrollAmount;
    setHighlight( dstObj );
}
// get the distance of an element from the top of the window
function getElemTop( elem )
{
	var temp=elem,top=temp.offsetTop; 
   	while ( temp=temp.offsetParent )
   		top += temp.offsetTop; 
   	return top;
}
// add spans to highlight the targeted anchor
function setHighlight( target )
{
    clearselection();
    var targetSpan = document.getElementById(target.id)
    targetSpan.style.backgroundColor = "darkblue";
    document.selectedspancolor = targetSpan.style.color;
    targetSpan.style.color="white";
    // save the name of the highlighted target for later erasure
    document.selectedspan = target.id;
}
// clear the selected anchor
function clearselection()
{
    if ( document.selectedspan!=undefined )
    {
    	var span;
        var name = document.selectedspan;
        span = document.getElementById(name);
        var origSpanBgColor = span.style.backgroundColor;
        var origSpanFgColor = span.style.foregroundColor;
        var divDisplayBox = document.getElementById("displayBox1");
		span.style.backgroundColor = divDisplayBox.style.backgroundColor;
		span.style.color = document.selectedspancolor;
        document.selectedspan = undefined;
    }
}
</script>
</head>
<body onload="scrollToSelection()">

<!-- buttons in band across top of page -->
<div id="header" class="header">
<xsl:call-template name="writeTopButtons">
	<xsl:with-param name="writeSave">0</xsl:with-param>
	<xsl:with-param name="disabled">TwinViewButton</xsl:with-param>
</xsl:call-template>
</div>

<form name="submission" action="/Alpha/TwinView" method="post">
<!-- submission fields -->
<input id="Version1" name="Version1" type="hidden"></input>
<input id="Version2" name="Version2" type="hidden"></input>
<input id="Pattern1" name="Pattern1" type="hidden"></input>
<input id="Pattern2" name="Pattern2" type="hidden"></input>
<input id="Command" name="Command" type="hidden"></input>
<input id="File" name="File" type="hidden"><xsl:attribute name="value">
<xsl:value-of select="$file"/></xsl:attribute></input>

<!-- wrapper for twin columns -->
<div class="twinCentreColumn" id="twinCentreColumn">

<!-- first column -->
<xsl:call-template name="writeColumn">
	<xsl:with-param name="longName" select="$long1Name"/>
	<xsl:with-param name="sideName">left</xsl:with-param>
	<xsl:with-param name="sideNumber" select="1"/>
	<xsl:with-param name="pattern" select="$pattern1"/>
	<xsl:with-param name="version" select="$version1Id"/>
</xsl:call-template>

<!-- second column -->
<xsl:call-template name="writeColumn">
	<xsl:with-param name="longName" select="$long2Name"/>
	<xsl:with-param name="sideName">right</xsl:with-param>
	<xsl:with-param name="sideNumber" select="2"/>
	<xsl:with-param name="pattern" select="$pattern2"/>
	<xsl:with-param name="version" select="$version2Id"/>
</xsl:call-template>

</div>
</form>
</body>
</html>
</xsl:template>

<!-- write a column within an enclosing div wrapper -->
<xsl:template name="writeColumn">
	<xsl:param name="longName"/>
	<xsl:param name="sideName"/>
	<xsl:param name="sideNumber"/>
	<xsl:param name="pattern"/>
	<xsl:param name="version"/>
	<div>
		<xsl:attribute name="class">
			<xsl:value-of select="concat($sideName,'Column')"/>
		</xsl:attribute>
	
	<!-- information box -->
	<div class="twinInfoBox">
	<xsl:attribute name="id">
		<xsl:value-of select="concat('twinInfoBox',$sideNumber)"/>
	</xsl:attribute>
	<xsl:call-template name="popup">
		<xsl:with-param name="versionId" select="$version"/>
		<xsl:with-param name="popupName" select="concat('version',$sideNumber,'Popup')"/>
	</xsl:call-template>
	<span class="information">
		<xsl:attribute name="id">
			<xsl:value-of select="concat('versionField',$sideNumber)"/>
		</xsl:attribute>
		<xsl:value-of select="$longName"/>
	</span>
	</div>

	<!-- main display box -->
	<div>
		<xsl:attribute name="class">
			<xsl:value-of select="concat('displayBox',$sideNumber)"/>
		</xsl:attribute>
		<xsl:attribute name="id">
			<xsl:value-of select="concat('displayBox',$sideNumber)"/>
		</xsl:attribute>
		<xsl:apply-templates select="//content[@side=$sideName]//body"/>
	</div>
	
	<!-- search box -->
	<div class="searchBox">
	<xsl:attribute name="id">
		<xsl:value-of select="concat('searchBox',$sideNumber)"/>
	</xsl:attribute>
		<xsl:call-template name="search">
			<xsl:with-param name="searchPrompt" select="//strings/string[@name='SearchPrompt']/@value"/>
			<xsl:with-param name="searchTitle" select="//strings/string[@name='SearchTitle']/@value"/>
			<xsl:with-param name="searchAllTitle" select="//strings/string[@name='SearchAllTitle']/@value"/>
			<xsl:with-param name="pattern" select="$pattern"/>
			<xsl:with-param name="suffix" select="$sideNumber"/>
		</xsl:call-template>
	</div>
	</div>
</xsl:template>

</xsl:stylesheet>